import React,{memo,useState} from 'react'
import './heighSearch.css'
import { Select } from 'antd';

import { DatePicker, Space } from 'antd';
import { connect } from 'react-redux';
const { RangePicker } = DatePicker;
const { Option } = Select;


const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};


const Index = memo((props)=> {

  const [cities, setCities] = useState(cityData[provinceData[0]]);
  const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);

  const handleProvinceChange = (value) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  };

  const onSecondCityChange = (value) => {
    setSecondCity(value);
  };


  return (
    <div style={{display:`${props.isShow}`==="true"?"none":"block"}}>
      <div id='heighSearch' >
      <div className='left'>
        <ul>
          <li><span>编号</span><span><input type="text" /></span></li>
          <li><span>职位</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="老板">老板</option>
                <option value="董事长">董事长</option>
                <option value="总经理">总经理</option>
                <option value="负责人">负责人</option>
                <option value="业务员">业务员</option>
                <option value="技术员">技术员</option>
              </select>
            </span>
          </li>
          <li><span>网址</span><span><input type="text" /></span></li>
          <li><span>最后更新</span>
            <span>
              <Space direction="vertical" size={12}>
                <RangePicker />      
              </Space>      
            </span>
          </li>
          <li><span>详细地址</span><span><input type="text" /></span></li>
          <li><span>客户来源</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="电话营销">电话营销</option>
                <option value="搜索引擎">搜索引擎</option>
                <option value="朋友介绍">朋友介绍</option>
                <option value="其他来源">其他来源</option>
              </select>
            </span>
          </li>
          <li><span>录入者</span>
            <span>
              <select >
                <option value="0">请选择</option>
                <option value="超级管理员">超级管理员</option>
              </select>
            </span>
          </li>
        </ul>
      </div>
      <div className='middle'>
        <ul>
          <li><span>客户名称</span><span><input type="text" /></span></li>
          <li><span>手机号码</span><span><input type="text" /></span></li>
          <li><span>所属行业</span>
            <span>
            <select className='industry'>
                <option value="0">请选择</option>
                <option value="农、林、牧、渔业">农、林、牧、渔业</option>
                <option value="采矿业">采矿业</option>
                <option value="制造业">制造业</option>
                <option value="电力、燃气及水的生产和供应业">电力、燃气及水的生产和供应业</option>
                <option value="建筑业">建筑业</option>
                <option value="交通运输、仓储和邮政业">交通运输、仓储和邮政业</option>
                <option value="信息传输、计算机服务和软件业">信息传输、计算机服务和软件业</option>
                <option value="批发和零售业">批发和零售业</option>
                <option value="住宿和餐饮业">住宿和餐饮业</option>
                <option value="金融业">金融业</option>
                <option value="房地产业">房地产业</option>
                <option value="租赁和商务服务业">租赁和商务服务业</option>
                <option value="科学研究、技术服务和地质勘查业">科学研究、技术服务和地质勘查业</option>
                <option value="水利、环境和公共设施管理业">水利、环境和公共设施管理业</option>
                <option value="居民服务和其他服务业">居民服务和其他服务业</option>
                <option value="教育">教育</option>
                <option value="卫生、社会保障和社会福利业">卫生、社会保障和社会福利业</option>
                <option value="文化、体育和娱乐业">文化、体育和娱乐业</option>
              </select>
            </span>
          </li>
          <li><span>所在地区</span>
            <span>
              {/* <select value={provinceData[0]} onChange={handleProvinceChange}>
                <option value="0" >请选择</option>
                {
                  provinceData.map((province) => (
                    <option key={province}>{province}</option>
                  ))
                }
              </select>
              <select value={secondCity} onChange={onSecondCityChange}>
                <option value="0">请选择</option>
                {
                  cities.map((city) => (
                    <option key={city}>{city}</option>
                  ))
                }
              </select> */}
            <Select defaultValue={provinceData[0]} style={{width: 120,}} onChange={handleProvinceChange}>
              {provinceData.map((province) => (
               <Option key={province}>{province}</Option>
             ))}
            </Select>
            <Select style={{width: 120,}} value={secondCity} onChange={onSecondCityChange}>
              {cities.map((city) => (
                <Option key={city}>{city}</Option>
              ))}
            </Select>
            </span>
          </li>
        </ul>
      </div>
      <div className='right'>
        <ul>
          <li><span>编号</span><span><input type="text" /></span></li>
          <li><span>编号</span><span><input type="text" /></span></li>
        </ul>
      </div>
      
      </div>
      <div className="mybtnitem">
        <button>立即搜索</button>
        <button>清空条件</button>
      </div>
    </div>
  )
})





// 状态映射  将reducer中的state映射成props，在组件中可以使用props.num获取值
const mapStateToProps = (state)=>{
  return {
    isShow:state.isShow
  }
}


// export default Connect(state的映射，dispatch的映射)(当前组件名称)Index
export default connect(mapStateToProps)(Index)
